<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东省国防动员宣传教育一张图</title>
    <link rel="stylesheet" href="./common/common.css">
    <script src="./common/echarts.min.js"></script>
    <script src="./common/shandong.js"></script>
</head>

<body>
    <div class="bg0"></div>
    <div class="dynamic-area1"></div>
    <div class="dynamic-area2"></div>
    <div class="bg1"></div>

    <div class="mapbg"></div>
    <!-- <div id="shmap"></div> -->
    <script>
        var video = { "济南市": "video/jinan.mp4", "青岛市": "video/qingdao.mp4", "淄博市": "video/zibo.mp4", "枣庄市": "video/zaozhuang.mp4", "东营市": "video/dongying.mp4", "烟台市": "video/yantai.mp4", "潍坊市": "video/weifang.mp4", "济宁市": "video/jining.mp4", "泰安市": "video/taian.mp4", "威海市": "video/weihai.mp4", "日照市": "video/rizhao.mp4", "临沂市": "video/linyi.mp4", "德州市": "video/dezhou.mp4", "聊城市": "video/liaocheng.mp4", "滨州市": "video/binzhou.mp4", "菏泽市": "video/heze.mp4" };
        var shmap = echarts.init(document.getElementById('shmap'));
        var optionMap1 = {
            tooltip: {
                show: false,
                trigger: 'item',
            },
            geo: [{
                map: '山东',
                // roam: true,
                zoom: 1.0, // 默认显示级别
                layoutSize: '100%',
                layoutCenter: ['50%', '50%'],
                left: 'center',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        shadowOffsetY: 0,
                        borderColor: "rgba(255,255,255,0.8)",
                        areaColor: '#2983c2'
                    }
                },

                emphasis: {
                    itemStyle: {
                        borderWidth: 2,
                        shadowOffsetY: 0,
                        borderColor: "rgba(255,255,255,1)",
                        areaColor: {
                            type: 'linear',
                            x: 0.0,
                            y: 0.0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ef550b' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#b6262a' // 100% 处的颜色
                            }],

                        },
                    },
                    label: {
                        color: 'rgba(255,255,255,1)'
                    }
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.name.replace(/市$/, "")
                    },
                    textStyle: {
                        fontSize: 16,
                        color: 'rgba(255,255,255,0.8)',
                        fontFamily: "宋体",
                        fontWeight: 'bold',
                    },
                },
                selectedMode: true,
                select: {
                    itemStyle: {
                        borderWidth: 2,
                        shadowOffsetY: 0,
                        borderColor: "rgba(255,255,255,1)",
                        areaColor: {
                            type: 'linear',
                            x: 0.0,
                            y: 0.0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ef550b' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#b6262a' // 100% 处的颜色
                            }],

                        },
                    },
                    label: {
                        color: 'rgba(255,255,255,1)'
                    }
                },
            }],

            series: [
                {
                    type: 'scatter',
                    symbol: 'image:///static/gfjy/img/icon.png',
                    symbolSize: [34, 40],
                    coordinateSystem: 'geo',
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        formatter: function (params) {
                            var tooltipHtml =
                                '<div class="realmap-tooltip">' +
                                '<h2>' + params.data.name + '</h2>' +
                                '</div>';
                            return tooltipHtml;
                        }
                    },
                    data: '',
                },
                {
                    type: 'effectScatter',
                    symbol: 'image:///static/gfjy/img/icon1.png',
                    symbolSize: [70, 97], // 0912
                    // symbolSize: [85,118],
                    coordinateSystem: 'geo',
                    data: '',
                    rippleEffect: {
                        number: 1,
                        period: 1.5,
                        scale: 1.2,
                    },
                    zlevel: 2,
                },

                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        scale: 6,
                        brushType: 'stroke',
                    },
                    showEffectOn: 'render',
                    itemStyle: {
                        normal: {
                            shadowColor: '#0ff',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                        },
                    },
                    symbol: 'circle',
                    symbolSize: [20, 10],
                    data: '', //effectScatter['德州市']
                    zlevel: 1,
                },
                {
                    name: '',
                    type: 'map',
                    geoIndex: 0,
                }

            ]
        };

        shmap.on('click',function(param){
            console.log(video[param.name],param.dataIndex);
            ws.send(JSON.stringify(video[param.name]))
        })
        window.onload = function(){
            shmap.setOption(optionMap1)
        }
        
    </script>

    <div id="videoBox" class="videoBox">
        <video id="sdgdvideo" src="" autoplay="autoplay" controls="controls"></video>
        <div id="closevideo" class="close"></div>
    </div>

    <div id="bt_set_ip">修改ip</div>
    <div id="settings">
        <div class="item">
            <p>ip地址</p><input type="text" id="ip_input">
        </div>
        <div id="submitSetting">保存设置</div>
        <div id="closeSetting"></div>
    </div>

    <button id="minibt" onclick=""></button>
    <button id="closebt" onclick=""></button>
    <script src="./index.js"></script>
</body>

</html>